<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			img{
				width: 20px;
				height: 20px;
			}
		</style>
	</head>
	<body>
		<form name="myForm">
		  <label for="name">输入姓名：</label>
		  <input type="text" id="name" name="name">
		  <img id="nameImg" style="display:none" src="images/ok.png"><br>
		
		  <label for="age">输入年龄：</label>
		  <input type="text" id="age" name="age">
		  <img id="ageImg" style="display:none" src="images/ok.png"><br>
		
		  <label for="password">输入密码：</label>
		  <input type="password" id="password" name="password">
		  <img id="passwordImg" style="display:none" src="images/ok.png"><br>
		
		  <label for="confirmPassword">确认密码：</label>
		  <input type="password" id="confirmPassword" name="confirmPassword">
		  <img id="confirmPasswordImg" style="display:none" src="images/ok.png"><br>
		
		  <label for="phoneNumber">手机号码：</label>
		  <input type="text" id="phoneNumber" name="phoneNumber">
		  <img id="phoneNumberImg" style="display:none" src="images/ok.png"><br>
		
		  <button type="button" onclick="submitForm()">注册</button>
		</form>
<script>
	function submitForm() {
	  var form = document.forms["myForm"];
	  if (validateName(form.name) && validateAge(form.age) && validatePassword(form.password) && validateConfirmPassword(form.confirmPassword) && validatePhoneNumber(form.phoneNumber)) {
	    form.submit();
	  }
	}
	
	function validateName(nameField) {
	  var name = nameField.value.trim();
	  if (name === "") {
	    alert("姓名不能为空");
	    nameField.focus();
	    return false;
	  } else if (name.length > 10) {
	    alert("姓名不能超过10位");
	    nameField.focus();
	    return false;
	  } else {
	    document.getElementById("nameImg").style.display = "inline";
	    return true;
	  }
	}
	
	function validateAge(ageField) {
	  var age = parseInt(ageField.value.trim());
	  if (isNaN(age) || age < 1 || age > 150) {
	    alert("年龄必须是1-150之间的正整数");
	    ageField.focus();
	    return false;
	  } else {
	    document.getElementById("ageImg").style.display = "inline";
	    return true;
	  }
	}
	
	function validatePassword(passwordField) {
	  var password = passwordField.value.trim();
	  if (password === "") {
	    alert("密码不能为空");
	    passwordField.focus();
	    return false;
	  } else if (password.length < 6) {
	    alert("密码不能少于6位");
	    passwordField.focus();
	    return false;
	  } else {
	    document.getElementById("passwordImg").style.display = "inline";
	    return true;
	  }
	}
	
	function validateConfirmPassword(confirmPasswordField) {
	  var confirmPassword = confirmPasswordField.value.trim();
	  var password = document.getElementById("password").value.trim();
	  if (confirmPassword === "") {
	    alert("确认密码不能为空");
	    confirmPasswordField.focus();
	    return false;
	  } else if (confirmPassword !== password) {
	    alert("确认密码必须和密码一致");
	    confirmPasswordField.focus();
	    return false;
	  } else {
	    document.getElementById("confirmPasswordImg").style.display = "inline";
	    return true;
	  }
	}
	
	function validatePhoneNumber(phoneNumberField) {
	  var phoneNumber = phoneNumberField.value.trim();
	  if (phoneNumber === "") {
	    alert("手机号码不能为空");
	    phoneNumberField.focus();
	    return false;
	  } else if (!/^[1]\d{10}$/.test(phoneNumber)) {
	    alert("手机号码必须为1开头的11位数字");
	    phoneNumberField.focus();
	    return false;
	  } else {
	    document.getElementById("phoneNumberImg").style.display = "inline";
	    return true;
	  }
	}
	
	// 监听input元素的blur事件，在用户输入完毕并离开input元素之后进行检测
	var nameInput = document.getElementById("name");
	nameInput.addEventListener("blur", function() {validateName(nameInput);});
	
	var ageInput = document.getElementById("age");
	ageInput.addEventListener("blur", function() {validateAge(ageInput);});
	
	var passwordInput = document.getElementById("password");
	passwordInput.addEventListener("blur", function() {validatePassword(passwordInput);});
	
	var confirmPasswordInput = document.getElementById("confirmPassword");
	confirmPasswordInput.addEventListener("blur", function() {validateConfirmPassword(confirmPasswordInput);});
	
	var phoneNumberInput = document.getElementById("phoneNumber");
	phoneNumberInput.addEventListener("blur", function() {validatePhoneNumber(phoneNumberInput);});

</script>
	</body>
</html>
